<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>404</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>


    <link href="plugins/buttons/css/buttons.css" rel="stylesheet" />
    <link href="css/login.css" rel="stylesheet" />
    <style>

    </style>
  </head>
  <body  >
  <div class="container demo-2">
    <div class="content">
      <div id="large-header" class="large-header">
        <canvas id="demo-canvas"></canvas>
      </div>
    </div>
  </div><!-- /container -->


  <!-- jQuery 2.1.4 -->
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- iCheck -->
    <script src="//cdn.bootcss.com/iCheck/1.0.2/icheck.min.js" type="text/javascript"></script>
    
        <script>
        $(function () {

          var lastTime = 0;
          var vendors = ['ms', 'moz', 'webkit', 'o'];
          for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                    || window[vendors[x]+'CancelRequestAnimationFrame'];
          }

          if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
              var currTime = new Date().getTime();
              var timeToCall = Math.max(0, 16 - (currTime - lastTime));
              var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                      timeToCall);
              lastTime = currTime + timeToCall;
              return id;
            };

          if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
              clearTimeout(id);
            };


          var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

          // Main
          initHeader();
          addListeners();

          function initHeader() {
            width = window.innerWidth;
            height = window.innerHeight;
            target = {x: 0, y: height};

            largeHeader = document.getElementById('large-header');
            largeHeader.style.height = height+'px';

            canvas = document.getElementById('demo-canvas');
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext('2d');

            // create particles
            circles = [];
            for(var x = 0; x < width*0.5; x++) {
              var c = new Circle();
              circles.push(c);
            }
            animate();
          }

          // Event handling
          function addListeners() {
            window.addEventListener('scroll', scrollCheck);
            window.addEventListener('resize', resize);
          }

          function scrollCheck() {
            animateHeader = document.body.scrollTop <= height;
          }

          function resize() {
            width = window.innerWidth;
            height = window.innerHeight;
            largeHeader.style.height = height+'px';
            canvas.width = width;
            canvas.height = height;
          }

          function animate() {
            if(animateHeader) {
              ctx.clearRect(0,0,width,height);
              for(var i in circles) {
                circles[i].draw();
              }
            }
            requestAnimationFrame(animate);
          }

          // Canvas manipulation
          function Circle() {
            var _this = this;

            // constructor
            (function() {
              _this.pos = {};
              init();
            })();

            function init() {
              _this.pos.x = Math.random()*width;
              _this.pos.y = height+Math.random()*100;
              _this.alpha = 0.1+Math.random()*0.3;
              _this.scale = 0.1+Math.random()*0.3;
              _this.velocity = Math.random();
            }

            this.draw = function() {
              if(_this.alpha <= 0) {
                init();
              }
              _this.pos.y -= _this.velocity;
              _this.alpha -= 0.0005;
              ctx.beginPath();
              ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
              ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
              ctx.fill();
            };
          }
 
      });  
    </script>
    
    
  </body>
</html>